<template>
  <!--设备类型-->
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-button-group style="margin-bottom: 20px">
        <el-button @click="drawer = true">新增</el-button>
        <el-button>编辑</el-button>
        <el-button>删除</el-button>
        <el-button @click="Dong">启用</el-button>
        <el-button @click="Ting">停用</el-button>
        <el-input v-model="name" placeholder="请输入设备编号或名称" clearable prefix-icon="el-icon-search"
          suffix-icon="el-icon-s-cale" style="width: 250px; margin-left: 573px" @input="handlerPageNo" />
      </el-button-group>

      <el-table :data="equipmentData" style="width: 100%" @selection-change="handleSelectionChange" stripe
        default-expand-all>
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column type="index" label="序号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="name" label="设备类型名称" width="200" align="center">
        </el-table-column>
        <el-table-column prop="encode" label="设备类型编码" width="200" align="center">
        </el-table-column>
        <el-table-column prop="xu" label="排序" width="100" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" effect="dark" v-if="scope.row.state == 1">启动</el-tag>
            <el-tag type="warning" effect="dark" v-if="scope.row.state == 2">禁用</el-tag>
            <el-tag type="danger" effect="dark" v-if="scope.row.state == 3">报废</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
      </el-table>
    </el-card>
    <!--新增抽屉面板-->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="35%">
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span> 设备状态 </span>
        </div>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="left"
          style="padding: 20px">
          <el-form-item label="上级类型" required>
            <el-select v-model="form.fu" prop="fu" placeholder="请选择" style="width: 322px">
              <el-option v-for="item in equipmentData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="设备类型编码" prop="encode">
            <el-input v-model="form.encode"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="xu" style="margin-left: 20px">
            <el-input v-model="form.xu"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state" style="margin-left: 20px">
            <el-radio-group v-model="form.state">
              <el-radio label="1">启用</el-radio>
              <el-radio label="2">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="margin-left: 20px">
            <el-input type="textarea" v-model="form.remark" cols="10px" rows="3px"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 171px; margin-top: 92px">
            <el-button @click="handleCancel">取消</el-button>
            <el-button @click="handleSubmit">确认</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
import { listType, InsertDeviceType, UpdateDEviceType, SelectDeviceType } from "@/api/eastjet-maintenance/type/type";
export default {
  data() {
    return {
      form: {
        fu: "",
        name: "",
        encode: "",
        xu: "",
        state: "",
        remark: "",
        tombstone: "0",
      },
      // 添加表单验证规则
      rules: {
        fu: [
          { required: true, message: '请选择上级类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入设备类型名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        encode: [
          { required: true, message: '请输入设备类型编码', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]+$/, message: '编码只能包含字母和数字', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      drawer: false,
      equipmentData: [],
      deletelist: [],
      name: ''
    };
  },
  created() {
    this.getList();
  },
  methods: {

    //搜索信息
    handlerPageNo() {
      SelectDeviceType(this.name).then((res) => {
        this.equipmentData = res.data.data;
      });
    },
    handleSelectionChange(selection) {
      console.log('数据', selection);
      this.deletelist = selection;
    },
    Dong() {
      this.deletelist.forEach((item) => {
        item.state = 1;
      });
      const typer = JSON.stringify(this.deletelist);
      UpdateDEviceType(typer).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.$notify({
            title: "启动成功",
            message: "这是一条成功的提示消息",
            type: "success",
          });
        } else {
          this.$notify({
            title: "启动失败",
            message: "这是一条失败的提示消息",
            type: "success",
          });
        }
      });
    },
    Ting() {
      this.deletelist.forEach((item) => {
        item.state = 2;
      });
      const typer = JSON.stringify(this.deletelist);
      UpdateDEviceType(typer).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.$notify({
            title: "启动成功",
            message: "这是一条成功的提示消息",
            type: "success",
          });
        } else {
          this.$notify({
            title: "启动失败",
            message: "这是一条失败的提示消息",
            type: "success",
          });
        }
      });
    },
    getList() {
      listType().then((res) => {
        this.equipmentData = res.data.data;
      });
      // axios.get("http://localhost:9289/select").then((res) => {
      //   this.equipmentData = res.data.data;
      // });
    },
    handleCancel() {
      // 处理取消
      this.drawer = false;
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，继续提交
          this.resetForm();
        } else {
          this.$message.error('请填写必填项');
          return false;
        }
      });
    },
    resetForm() {
      InsertDeviceType(this.form).then((res) => {
        if (parseInt(res.data.code) == 520) {
          this.getList();
          this.$notify({
            title: "成功",
            message: "这是一条成功的提示消息",
            type: "success",
          });
          this.drawer = false;
        } else {
        }
      });
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1210px;
  height: 660px;
  margin-left: 14px;
}

.box-card2 {
  width: 526px;
  height: 749px;
  margin-left: 2px;
}
</style>
